<template>
  <div>
    <el-card shadow="always">
      <div class="header">
        文章标题 : <el-input v-model="title"
                  class="title"
                  placeholder="请输入标题"></el-input>
      </div>
      <div class="header">
        语言类型 :
        <el-select v-model="languageType"
                   placeholder="请选择"
                   @change="changeLang">
          <el-option v-for="item in lang"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
      </div>
      <Tinymce :height="300"
               v-model="content"
               :qiniu="qiniu" />
      <div class="footer">
        <el-button type="primary"
                   @click="submit">保存</el-button>
      </div>
    </el-card>
  </div>
</template>
<script>
import Tinymce from "@/components/Tinymce";
import { getArticle, addArticle, updateArticle } from "@/api/article";
// import { getToken } from "@/utils/auth";
import { upload } from "@/api/qiniu";
import { domain } from "@/config";
const lang = [
  {
    value: 0,
    label: "中文"
  },
  {
    value: 1,
    label: "英文"
  }
];
export default {
  components: {
    Tinymce
  },
  data() {
    return {
      lang,
      title: "",
      content: ``,
      languageType: 1,
      qiniu: {
        token: "",
        preUrl: ""
      }
    };
  },
  async created() {
    this.getArticle();
  },
  methods: {
    init() {
      // const load = this.$loading();
      this.title = "";
      this.content = "";
      // load.close();
    },
    changeLang(languageType) {
      this.languageType = languageType;
    },
    async getArticle() {
      if (!this.atricleId) {
        return this.init();
      }
      const { title, url, languageType } = await getArticle(this.atricleId);
      this.title = title;
      this.languageType = languageType;
      const { data } = await this.$http(url);
      this.content = data;
    },
    async submit() {
      if (this.title === "") {
        this.$message({
          message: "请填写标题",
          type: "error",
          center: true,
          duration: 2 * 1000
        });
        return;
      }

      const content = new File([this.content], `${this.title}.html`, {
        type: "text/plain;charset=utf-8"
      });
      const params = new FormData();
      params.append("file", content);
      const url = await upload(params);
      const data = {
        title: this.title,
        url,
        languageType: this.languageType
      };
      !this.atricleId && (await addArticle(data));
      this.atricleId && (await updateArticle(this.atricleId, data));

      this.$message({
        message: this.atricleId ? "编辑成功" : "添加成功",
        type: "success",
        center: true,
        duration: 2 * 1000
      });
      this.$router.push({ name: "articleList" });
    },
    changeIsRead(status) {
      this.text = status ? "可读" : "不可读";
    }
  },
  computed: {
    atricleId() {
      const { id } = this.$route.query;
      return id || null;
    }
  },
  watch: {
    $route(cur) {
      this.getArticle();
    }
  }
};
</script>
<style lang="scss" scoped>
.header {
  margin-bottom: 20px;
  .title {
    width: 400px;
  }
  .switch {
    margin-top: 20px;
    font-weight: bold;
  }
}
.footer {
  padding: 15px;
  text-align: right;
}
</style>
